<template>
	<view class="content">
		<header class="navbar" @click="toggleTags">
			<view class="navbar-content">
				<span class="navbar-icon">&#9776;&ensp;导航</span>
				<span class="navbar-icon">202211000341-张晓颖</span>
			</view>
			<view class="tags-container" v-if="showTags">
				<view class="tag" v-for="item in navList" :key="item" @click="selectByTag(item.typeId)">
					{{ item.typeName }}
				</view>
			</view>
		</header>

		<main class="news-list" @scroll="handleScroll">
			<view class="news-item" v-for="(news, index) in newsList" :key="index"
				@click="toDetail(news.newsId, news.title)">
				<view class="news-content">
					<view class="news-image">
						<image :src="news.imgList[0]" mode="aspectFill"></image>
					</view>
					<view class="news-details">
						<view class="news-title">{{ news.title }}</view>
						<view class="news-digest">{{ news.digest }}</view>
					</view>
				</view>
				<view class="news-meta">
					<text class="news-source">{{ news.source }}</text>
					<text class="news-post-time">{{ news.postTime }}</text>
				</view>
			</view>
			<view class="loading-more" v-if="loadingMore">正在加载更多...</view>
		</main>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				navList: [{
						"typeId": 532,
						"typeName": "新闻"
					},
					{
						"typeId": 533,
						"typeName": "娱乐"
					},
					{
						"typeId": 534,
						"typeName": "体育"
					},
					{
						"typeId": 535,
						"typeName": "财经"
					},
					{
						"typeId": 536,
						"typeName": "军事"
					},
					{
						"typeId": 537,
						"typeName": "科技"
					},
					{
						"typeId": 538,
						"typeName": "手机"
					},
					{
						"typeId": 539,
						"typeName": "数码"
					},
					{
						"typeId": 540,
						"typeName": "时尚"
					},
					{
						"typeId": 541,
						"typeName": "游戏"
					},
					{
						"typeId": 543,
						"typeName": "健康"
					},
					{
						"typeId": 544,
						"typeName": "旅游"
					},
					{
						"typeId": 545,
						"typeName": "视频"
					},
					{
						"typeId": 546,
						"typeName": "头条"
					},
					{
						"typeId": 547,
						"typeName": "精选"
					}
				],
				showTags: false,
				newsList: [],
				page: 1,
				loadingMore: false,
				error: null,
			};
		},
		onLoad() {
			// 获取新闻list
			this.getNewsList();
		},
		methods: {
			toggleTags() {
				this.showTags = !this.showTags;
			},
			handleScroll(event) {
				const {
					scrollTop,
					scrollHeight,
					clientHeight
				} = event.target;
				if (scrollTop + clientHeight >= scrollHeight - 10) {
					this.loadMoreNews();
				}
			},
			loadMoreNews() {
				if (!this.loadingMore) {
					this.loadingMore = true;
					this.page++;
					this.loadNews();
				}
			},
			loadNews() {
				// 模拟异步请求加载新闻
				setTimeout(() => {
					const newNews = Array.from({
						length: 10
					}, (_, i) => ({
						title: `新闻标题 ${i + (this.page - 1) * 10}`,
						imgList: [`${i + (this.page - 1) * 10}.png`],
						source: `来源 ${i + (this.page - 1) * 10}`,
						newsId: `${i + (this.page - 1) * 10}`,
						digest: `摘要 ${i + (this.page - 1) * 10}`,
						postTime: `2024-11-02 20:57:20`,
						videoList: null
					}));
					this.newsList = [...this.newsList, ...newNews];
					this.loadingMore = false;
				}, 1000);
			},
			getNewsList() {
				uni.request({
						url: "https://www.mxnzp.com/api/news/list/v2?typeId=532&page=1&app_id=ktowtrpujjskwqsy&app_secret=EWZo0EePEMjKSFmfAdC2P3cyF24drINp"
					}).then(response => {
						console.log(response.data.data)
						this.newsList = response.data.data;
					})
					.catch(error => {
						console.error('获取导航列表失败:', error);
					});
			},
			// 通过tag查询新闻
			selectByTag(typeId) {
				uni.request({
						url: "https://www.mxnzp.com/api/news/list/v2?typeId=" + typeId +
							"&page=1&app_id=ktowtrpujjskwqsy&app_secret=EWZo0EePEMjKSFmfAdC2P3cyF24drINp"
					}).then(response => {
						console.log(response.data.data)
						this.newsList = response.data.data;
					})
					.catch(error => {
						console.error('获取导航列表失败:', error);
					});
			},
			// 获取详情页
			toDetail(newsId, title) {
				uni.navigateTo({
					url: `/pages/index/detail/detail?newsId=${newsId}&title=${encodeURIComponent(title)}`
				});
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
	}

	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #333;
		padding: 10px 20px;
		z-index: 1000;
		cursor: pointer;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.navbar-content {
		color: white;
		font-size: 25rpx;
	}

	.navbar-icon {
		font-size: 32rpx;
		margin-right: 10px;
	}


	.tags-container {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		justify-content: flex-start;
		padding-left: 20px;
	}

	.tag {
		background-color: #cad9e1;
		padding: 10px 20px;
		border-radius: 5px;
		font-size: 25rpx;
	}

	.news-list {
		width: 100%;
		/* height: calc(100vh - 80px); */
		/* 调整高度以适应屏幕，减去导航栏的高度 */
		margin-top: 20rpx;
		overflow-y: auto;
		padding: 10px;
		box-sizing: border-box;
	}

	.news-item {
		padding: 10px;
		border-bottom: 1px solid #ddd;
		display: flex;
		flex-direction: column;
	}

	.news-content {
		display: flex;
		align-items: flex-start;
	}

	.news-image {
		width: 100px;
		height: 100px;
		margin-right: 10px;
		overflow: hidden;
	}

	.news-image image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.news-details {
		flex: 1;
	}

	.news-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 5px;
	}

	.news-digest {
		font-size: 14px;
		color: #555;
	}

	.news-meta {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
	}

	.news-source,
	.news-post-time {
		font-size: 12px;
		color: #666;
	}

	.loading-more {
		text-align: center;
		padding: 10px;
		color: #aaa;
	}
</style>